<template>
    <div class="salesMenuMainContent">
			<form action="">
				<h1>Services</h1>
				<ul>
					<li v-for="(service, index) in services" :key="index" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">
						{{service.name}}<span>{{ service.price | currency }}</span>
					</li>
				</ul>
				<div class="total">
					Total:<span>{{total() | currency}}</span>
				</div>
			</form>
    </div>
</template>
<script>
export default {
  name: 'salesMenuDemo',
  data () {
    return {
      title: '销售菜单管理',
		  services: [
				{
					name: 'Web Development',
					price: 300,
					active: true
				},
				{
					name: 'Design',
					price: 400,
					active: false
				},
				{
					name: 'Integration',
					price: 250,
					active: false
				},
				{
					name: 'Training',
					price: 220,
					active: false
				}
			]
    }
  },
  methods: {
    toggleActive: function (s) {
			s.active = !s.active
		},
		total: function () {
			var total = 0
			this.services.forEach(function(s){
				if(s.active){
					total += s.price
				}
			})
			return total
		}
	},
	filters: {
		'currency': function(value){// 自定义过滤器 
			return '$' + value.toFixed(2)
		}
	}
}
</script>
<style>
[v-cloak] {
	display: none;
}

*{
	margin: 0;
	padding: 0;
}

.salesMenuMainContent{
	font:15px/1.3 'Open Sans', sans-serif;
  color: #5e5b64;
  text-align:center;
}

.salesMenuMainContent form{
	background-color: #61a1bc;
	border-radius: 6px;
	box-shadow: 0 1px  1px #cccc;
	width: 400px;
	padding: 35px 60px;
	margin: 50px auto;
}

.salesMenuMainContent form h1{
	color:#fff;
	font-size:64px;
	font-family:'Cookie', cursive;
	font-weight: normal;
	line-height:1;
	text-shadow:0 3px 0 rgba(0,0,0,0.1);
}

.salesMenuMainContent form ul{
	list-style: none;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
	margin: 20px 0 15px;
}

.salesMenuMainContent form ul li{
	padding: 20px 30px;
	background-color: #e35885;
	margin-bottom:8px;
	/* margin: 8px auto; */
	box-shadow:0 1px 1px rgba(0,0,0,0.1);
	cursor:pointer;
}

.salesMenuMainContent form ul li span{
	float: right;
}

.salesMenuMainContent form li.active{
	background-color: #8ec16d;
}

.salesMenuMainContent .total{
	border-top:1px solid rgba(255,255,255,0.5);
	padding:15px 30px;
	font-size:20px;
	font-weight:bold;
	text-align: left;
	/* background-color: yellow; */
	color:#fff;
}

.salesMenuMainContent .total span{
	float: right;
}

</style>

